<template>
    <div id="basicInformation_cpxx_add_" class="padding" >
        <el-form ref="saveDatas" :rules="rules"  :model="saveDatas" :label-position="labelPosition" label-width="80px" class="padding" >
            <el-form-item label="选择分类" prop="dlxl">
                <el-cascader
                        v-model="saveDatas.dlxl"
                        :options="options"
                        :props="props">
                </el-cascader>
            </el-form-item>
            <el-form-item label="选择分类" style="display: none">
                <el-cascader
                        v-model="saveDatas.dlxl_"
                        :options="options"
                        :props="props_">
                </el-cascader>
            </el-form-item>
            <el-form-item label="员工名称" prop="ygmc">
                <el-input v-model="saveDatas.ygmc" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="员工工号" prop="yggh">
                <el-input v-model="saveDatas.yggh" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="坐席号码" prop="zxhm">
                <el-input v-model="saveDatas.zxhm" style="width:300px" :disabled="true"></el-input>
                <el-button type="primary" @click="selectZuoxi()">选择坐席</el-button>
            </el-form-item>
            <el-form-item label="分配用户" prop="user_id">
                <el-input v-model="saveDatas.user_id" style="width:300px;display: none"></el-input>
                <el-input v-model="saveDatas.username" style="width:300px" :disabled="true"></el-input>
                <el-button type="primary" @click="selectUserId()">选择用户</el-button>
            </el-form-item>
            <el-form-item label="联系电话" prop="lxdh">
                <el-input v-model="saveDatas.lxdh" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="xb">
                <el-radio class="radio" v-model="saveDatas.xb" label="1">男</el-radio>
                <el-radio class="radio" v-model="saveDatas.xb" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证号" prop="sfzh">
                <el-input v-model="saveDatas.sfzh" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="bz">
                <el-input v-model="saveDatas.bz" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('saveDatas')">保存</el-button>
                <el-button @click="$refs['saveDatas'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: "index",
        props:['options','saveDatas'],
        watch:{
            'saveDatas.dlxl':function () {
                if (this.saveDatas.dlxl_==''||this.saveDatas.dlxl_==null)this.saveDatas.dlxl_=[]
                this.xunhuan(this.options)
            }
        },
        data() {
            return {
                labelPosition:"right",
                zuoxiHeader:[//列表的头
                     {field: 'id',  title: '序号', sort: true,width:70}
                    , {field: 'number',  title: '坐席号码', sort: true}
                ],
                userHeader:[//列表的头
                     {field: 'id',  title: '序号', sort: true,width:70}
                    , {field: 'username',  title: '用户名', sort: true}
                ],
                props: {
                    value: 'id',
                    label: 'label',
                    children: 'children'
                },
                props_: {
                    value: 'label',
                    label: 'label',
                    children: 'children'
                },
                rules:{//规则
                    dlxl:[
                        { required: true, message: '请选择分类', trigger: 'change' },
                    ],
                    ygmc:[
                        { required: true, message: '请输入员工名称', trigger: 'blur' }
                    ],
                    yggh:[
                        { required: true, message: '请输入员工工号', trigger: 'blur' }
                    ],
                    zxhm:[
                        { required: true, message: '请输入坐席号码', trigger: 'blur' }
                    ],
                    lxdh:[
                        { min:0, max:20,  message: '长度在 0 到 20 个字符', trigger: 'blur' },
                    ],
                    bz:"",
                }
            }
        },
        methods: {
            xunhuan:function(options,time=0){//循环修改大类小类的名称
                for(let i in options){
                    if (options[i]['id']==this.saveDatas.dlxl[time]){
                        this.saveDatas.dlxl_[time]=$.trim(options[i]['label'])
                        this.xunhuan(options[i]['children'],++time)
                    }
                }
            },
            onSubmit(saveDatas){//保存数据
                this.$refs[saveDatas].validate((valid) => {
                    if (valid) {
                        this.$message_.postTips(this,'保存','basic-information-system-ygxx/save',{CrmSystemYgxx:this.saveDatas})
                    } else {
                        return false;
                    }
                })
            },
            selectZuoxi:function(){
                let index = layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['60%', '60%'], //宽高
                    close: true,
                    title: '选择坐席',
                    shadeClose: true,
                    content: $("#zuoxi"),
                })
                this.$message_.layTable(this,'cti-manager-zuoxi/list','#zuoxiList',{},this.zuoxiHeader,0,'',true);
                layui.table.on('row(zuoxiList)',(obj)=>{
                    this.saveDatas.zxhm = obj.data.number;
                    layer.close(index)
                })
                $("#zuoxiButton").click(()=>{
                    noCheckCache = true
                    this.$message_.layTable(this,'cti-manager-zuoxi/list','#zuoxiList',{zuoxi:$('#zuoxiInput').val()},this.zuoxiHeader,0,'',true);
                    layui.table.on('row(zuoxiList)',(obj)=>{
                        this.saveDatas.zxhm = obj.data.number;
                        layer.close(index)
                    })
                })
            },
            selectUserId:function(){
                let index = layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['60%', '60%'], //宽高
                    close: true,
                    title: '选择用户',
                    shadeClose: true,
                    content: $("#user"),
                })
                this.$message_.layTable(this,'user/list','#userList',{},this.userHeader,0,'',true)
                layui.table.on('row(userList)',(obj)=>{
                    this.saveDatas.username = obj.data.username;
                    this.saveDatas.user_id = obj.data.id;
                    layer.close(index)
                })
                $("#userButton").click(()=>{
                    noCheckCache = true
                    this.$message_.layTable(this,'user/list','#userList',{username:$('#userInput').val()},this.userHeader,0,'',true);
                    layui.table.on('row(userList)',(obj)=>{
                        this.saveDatas.username = obj.data.username;
                        this.saveDatas.user_id = obj.data.id;
                        layer.close(index)
                    })
                })
            },
        },
    }
</script>